<template>
  <div class="content travelFootprints">
    <THeader :active="this.$route.path"></THeader>
    <el-row>
      <el-col :span="20" :offset="2">
        <h4 :style="{fontSize:'16px',color:'#303133'}">
          <span>旅游游记</span>
          <el-checkbox v-model="searchSwitch" @change="getNotesList" style="margin-left:10px;">只看自己</el-checkbox>
          <div style="float:right">
            <el-button @click="routeTo('/travel-notes/report')">发表游记</el-button>
          </div>
        </h4>
        <Divider/>
      </el-col>

    </el-row>

    <el-row>
      <el-col :span="20" :offset="2">
        <el-card style="min-height: 600px">
          <el-tabs v-model="activeTag" @tab-click="getNotesList">
            <el-tab-pane label="所有" name="all"></el-tab-pane>
            <el-tab-pane :label="item.name" :name="item.key" v-for="(item,index) in list" :key="index"></el-tab-pane>
          </el-tabs>

          <div style="padding-left: 10px;line-height:60px;color:#999">最多只显示 {{total}} 条结果 当前第 {{current}} 页，共 {{pageLen}} 页</div>

          <card-item v-for="(item,index) in notesList" :key="index" :tagIndex="item.state" :title="item.title" :author="item.author_name" :date="item.date" :text="item.brief" :routeTo="()=>routeToSingle(item.id)">
          </card-item>

          <div style="padding: 20px 0;text-align: right">
            <el-pagination @size-change="()=>getNotesList()" @current-change="()=>getNotesList()" :current-page.sync="current" :page-size="pageSize" :total="total" background layout="prev, pager, next">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { articleListServer } from "../../api/notes";
export default {
  name: "travelFootprints",
  data() {
    return {
      notesList: [],
      list: [
        { key: "inbound", name: "国内游" },
        { key: "abroad", name: "出境游" },
        { key: "spot", name: "热门景点" },
        { key: "shopping", name: "购物圣地" },
        { key: "article", name: "旅游文摘" }
      ],
      searchSwitch: true,
      activeTag: "all",

      total: 0,
      pageSize: 10,
      current: 1
    };
  },
  created() {
    this.getNotesList();
  },
  computed: {
    pageLen() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    routeTo(path) {
      this.$router.push(path);
    },
    handleTagsClick(data) {
      this.getNotesList();
    },

    routeToSingle(id) {
      this.routeTo(`/travel-notes/${id}`);
    },
    getNotesList() {
      //展示目录
      this.notesList = [];
      const tarTag = this.list.find(item => item.key === this.activeTag);
      console.log(tarTag, this.activeTag);
      articleListServer("get", {
        params: {
          state: 2,
          tag: tarTag ? tarTag.key : undefined,
          self: this.searchSwitch,
          pageSize: this.pageSize,
          current: this.current
        }
      }).then(
        suc => {
          const { code, message, data } = suc.data;
          if (code) {
            const { current, pageSize, total, list } = data;
            if (Array.isArray(list)) {
              this.notesList = list;
              this.total = total;
              this.pageSize = pageSize;
              this.current = current;
            }
          } else {
            this.$message({
              type: "error",
              message
            });
          }
        },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        }
      );
    }
  }
};
</script>

<style lang="less">
.div {
  color: #333;
}
</style>
